<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新增员工</title>
    <script src="../js/jquery.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        .form-group {
            margin-bottom: 15px;
        }
        label {
            display: block;
            margin-bottom: 5px;
        }
        input[type="radio"] {
            margin-right: 10px;
        }
        .container {
            display: none;
        }
        #pageNav {
            margin-top: 20px;
        }
        /* 页面整体样式 */
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }

        /* 表格样式 */
        table {
            width: 100%;
            border-collapse: collapse;
        }

        table th, table td {
            padding: 10px;
            text-align: left;
            border: 1px solid #ddd;
        }

        table th {
            background-color: #f2f2f2;
            font-weight: bold;
        }

        /* 表单样式 */
        .form-group {
            margin-bottom: 15px;
        }

        .form-group label {
            display: block;
            margin-bottom: 5px;
        }

        .form-group input[type="text"],
        .form-group input[type="email"],
        .form-group input[type="tel"],
        .form-group input[type="date"],
        .form-group input[type="number"] {
            width: 100%;
            padding: 8px;
            box-sizing: border-box;
            border: 1px solid #ccc;
            border-radius: 4px;
        }

        .form-group input[type="file"] {
            padding: 8px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }

        .form-group input[type="radio"] {
            margin-right: 10px;
        }

        /* 按钮样式 */
        button {
            padding: 10px 20px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }

        button:hover {
            background-color: #45a049;
        }

        /* 分页导航样式 */
        #pageNav {
            margin-top: 20px;
        }

        #pageNav button {
            padding: 8px 16px;
            margin: 0 5px;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }

        #pageNav button:disabled {
            background-color: #ccc;
            cursor: not-allowed;
        }

        #pageNav button:hover:not(:disabled) {
            background-color: #0056b3;
        }

        /* 新增员工框样式 */
        .container {
            margin-top: 20px;
            border: 1px solid #ccc;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            background-color: #fff;
        }

        /* 新增员工按钮样式 */
        #addEmployee {
            margin-top: 20px;
        }



    </style>
</head>
<body>
    <h1>展示数据</h1>
    <div>
        <table>
            <thead>
                <tr>
                    <th>员工姓名</th>
                    <th>员工年龄</th>
                    <th>员工头像</th>
                    <th>员工性别</th>
                    <th>员工部门</th>
                    <th>员工职位</th>
                    <th>员工薪水</th>
                    <th>员工电子邮件</th>
                    <th>员工手机号</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody id="showEmployeeMessage"></tbody>
        </table>
        <div id="pageNav">
            当前第<span id="pageNum"></span>页
            一共<span id="pageCount"></span>页


            <button id="firstPage">首页</button>
            <button id="prevPage">上一页</button>
            <button id="nextPage">下一页</button>
            <button id="lastPage">尾页</button>
        </div>
    </div>
    
    <div class="container">
        <h1>新增员工</h1>
        <form id="employeeForm" enctype="multipart/form-data">
            <div class="form-group">
                <label for="empName">名字:</label>
                <input type="text" id="empName" name="empName" required>
            </div>
            <div class="form-group">
                <label for="imagePath">头像:</label>
                <input type="file" id="imagePath" name="empImagePath" accept="image/*" multiple="true">
            </div>
            <div class="form-group">
                <label>性别:</label>
                <input type="radio" id="male" name="gender" value="M" checked>
                <label for="male">男</label>
                <input type="radio" id="female" name="gender" value="F">
                <label for="female">女</label>
            </div>
            <div class="form-group">
                <label>部门编号:</label>
                <input type="radio" id="dept1" name="departmentId" value="1" checked>
                <label for="dept1">计算机部门</label>
                <input type="radio" id="dept2" name="departmentId" value="2">
                <label for="dept2">销售部</label>
                <input type="radio" id="dept3" name="departmentId" value="3">
                <label for="dept3">推广部</label>
            </div>
            <div class="form-group">
                <label for="jobTitle">职位:</label>
                <input type="text" id="jobTitle" name="jobTitle" required>
            </div>
            <div class="form-group">
                <label for="salary">薪水:</label>
                <input type="number" id="salary" name="salary" required>
            </div>
            <div class="form-group">
                <label for="email">电子邮件地址:</label>
                <input type="email" id="email" name="email">
            </div>
            <div class="form-group">
                <label for="phoneNumber">手机号码:</label>
                <input type="tel" id="phoneNumber" name="phoneNumber">
            </div>
            <div class="form-group">
                <label for="birthDate">出生日期:</label>
                <input type="date" id="birthDate" name="birthDate" required>
            </div>
            <div class="form-group">
                <label for="hireDate">入职日期:</label>
                <input type="date" id="hireDate" name="hireDate" required>
            </div>
            <button type="submit">提交</button>
            <button id="closeAddModal">关闭</button>
        </form>
    </div>

    <button id="addEmployee">新增员工</button>

    <script>
        $(document).ready(function() {
            let currentPage = 1;
            let totalPages = 1;

            function onloadOk(pageNum) {
                $.ajax({
                    url: 'http://localhost:18081/employee/getList',
                    type: 'GET',
                    data: {
                        pageNum: pageNum
                    },
                    success: function(response) {
                        $('#pageNum').html(response.data.pageNum)
                        $('#pageCount').html(response.data.pages)
                        console.log(response)

                        totalPages = response.data.pages;
                        displayData(response.data.list);
                        updatePageButtons();
                    }
                });
            }

            function displayData(list) {
                const tbody = $('#showEmployeeMessage');
                tbody.empty();
                list.forEach(employee => {
                    let userPathUrl = employee.imagePath;
                    if(employee.imagePath==null){
                            userPathUrl = "./images/ml.jpeg";
                    } else {
                            userPathUrl = "http://localhost:18081/" + userPathUrl;
                    }    

                    let gender = employee.gender;
                    if(gender === 'M'){
                        gender = '男';
                    }else{
                        gender = '女';
                    }
                    const row = `
                        <tr>
                            <td>${employee.empName}</td>
                            <td>${employee.age}</td>
                            <td><img src="${userPathUrl}" width="150" height="100" align="center"/></td>
                            <td>${gender}</td>
                            <td>${employee.department.departmentName}</td>
                            <td>${employee.jobTitle}</td>
                            <td>${employee.salary}</td>
                            <td>${employee.email}</td>
                            <td>${employee.phoneNumber}</td>
                            <td><button onclick="updateEmployee(${employee.employeeId})">修改</button></td>
                        </tr>`;
                    tbody.append(row);
                });
            }

            function updatePageButtons() {
                $('#firstPage').prop('disabled', currentPage === 1);
                $('#prevPage').prop('disabled', currentPage === 1);
                $('#nextPage').prop('disabled', currentPage === totalPages);
                $('#lastPage').prop('disabled', currentPage === totalPages);
            }

            $('#firstPage').click(function() {
                currentPage = 1;
                onloadOk(currentPage);
            });

            $('#prevPage').click(function() {
                if (currentPage > 1) {
                    currentPage--;
                    onloadOk(currentPage);
                }
            });

            $('#nextPage').click(function() {
                if (currentPage < totalPages) {
                    currentPage++;
                    onloadOk(currentPage);
                }
            });

            $('#lastPage').click(function() {
                currentPage = totalPages;
                onloadOk(currentPage);
            });

            $('#addEmployee').click(function() {
                $('.container').toggle();
                clearForm();
            });

            $('#closeAddModal').click(function() {
                $('.container').hide();
                clearForm();
            });

            function clearForm() {
                $('#empName').val('');
                $('#imagePath').val('');
                $('input[name="gender"]').prop('checked', false);
                $('input[name="gender"][value="M"]').prop('checked', true);
                $('input[name="departmentId"]').prop('checked', false);
                $('input[name="departmentId"][value="1"]').prop('checked', true);
                $('#jobTitle').val('');
                $('#salary').val('');
                $('#email').val('');
                $('#phoneNumber').val('');
                $('#birthDate').val('');
                $('#hireDate').val('');
            }

            $('#employeeForm').on('submit', function(event) {
                event.preventDefault(); // 阻止默认的表单提交行为
                // 获取表单数据
                var empName = $('#empName').val();
                var imagePath = $('#imagePath')[0].files[0];
                var gender = $('input[name="gender"]:checked').val();
                var departmentId = $('input[name="departmentId"]:checked').val();
                var jobTitle = $('#jobTitle').val();
                var salary = parseInt($('#salary').val());
                var email = $('#email').val();
                var phoneNumber = $('#phoneNumber').val();
                var birthDate = $('#birthDate').val();
                var hireDate = $('#hireDate').val();
                // 使用 FormData 对象来处理文件上传
                var formData = new FormData();
                formData.append('empName', empName);
                formData.append('empImagePath', imagePath, imagePath.name);
                formData.append('gender', gender);
                formData.append('departmentId', departmentId);
                formData.append('jobTitle', jobTitle);
                formData.append('salary', salary);
                formData.append('email', email);
                formData.append('phoneNumber', phoneNumber);
                formData.append('birthDate', birthDate);
                formData.append('hireDate', hireDate);
                // 使用 $.ajax 发送请求
                $.ajax({
                    url: 'http://localhost:18081/employee/insertEmp',
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function(response) {
                        alert('员工信息已成功提交！');
                        // 重新加载数据
                        onloadOk(currentPage);
                        // 关闭新增框
                        $('.container').hide();
                        clearForm();
                    },
                    error: function(xhr, status, error) {
                        console.error('提交员工信息失败：', error);
                        alert('提交失败，请检查网络连接或数据格式是否正确。');
                    }
                });
            });

            onloadOk(currentPage);
        });
    </script>
</body>
</html>